<template>
  <div class="public-views home">

    
    <!-- 轮播图片 or 侧边栏  -->
    <banner-sidebar></banner-sidebar>
    <div class="public-inner">
      <!-- 新游速递  -->
      <new-Game></new-Game>
      新聞公告
    <Credit-Standing></Credit-Standing>
      <!-- 游戏资讯  -->
      <game-news></game-news>
      <!-- 精彩活动  -->
      <div class="home-activity scroll-item">
        <h3 class="home-title">精彩活动</h3>
        <div class="activity-item" v-for="item in Home.activity">
          <a :href="item.url ? item.url : 'javascript:;'"><img v-lazy="item.src" alt=""></a>
          <h4>{{item.text}}</h4>
        </div>
      </div>
      <!-- 热门游戏  -->
      <hot-game></hot-game>
      <!-- 专题合集  -->
      <div class="home-activity scroll-item">
        <h3 class="home-title">专题合集</h3>
        <div class="activity-item" v-for="item in Home.activity">
          <a :href="item.url ? item.url : 'javascript:;'"><img v-lazy="item.src" alt=""></a>
          <h4>{{item.text}}</h4>
        </div>
      </div>
      <!-- 下载排行  -->
      <download></download>
      <!-- H5游戏  -->
      <div class="home-h5-game">
        <h3 class="home-title">H5游戏专区
          <a href="#">更多
            <i class="iconfont icon-gengduo"></i>
          </a>
        </h3>
        <ul class="h5-game-list">
          <li v-for="item in Home.h5Game">
            <a :href="item.link ? item.link : 'javascript:;'">
              <i v-lazy:background-image="item.icon"></i>
              <h5>{{item.name}}</h5>
              <span>{{item.type}}</span>
              <span>{{item.label}}</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 精美图集  -->
      <div class="beautiful-images scroll-item">
        <h3 class="home-title">精美图集</h3>
        <ul class="images-list">
          <li id="first"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!-- 友情链接  -->
      <div class="friendly-link">
        <h3 class="home-title">友情链接</h3>
        <ul class="friendly-link-list">
          <li v-for="item in friendlyLink" :class="{'friendly-link-activate': item.activate}">
            <a href="#">{{item.text}}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
const BannerSidebar = () => import('./module/bannerSidebar.vue')
const NewGame = () => import('./module/newGame.vue')
const GameNews = () => import('./module/gameNews.vue')
const HotGame = () => import('./module/hotGame.vue')
const Download = () => import('./module/download.vue')
const CreditStanding = () => import('./module/creditStanding.vue')
export default {
  components: {
    BannerSidebar,
    NewGame,
    GameNews,
    HotGame,
    CreditStanding,
    Download
  },
  title() {
    return `米娱游戏_BT手游第一平台_手机网游_手机游戏下载_手机游戏排行榜`
  },
  data() {
    return {
      // 友情链接
      friendlyLink: [
        { text: '新游速递', activate: true },
        { text: '游戏资讯', activate: false },
        { text: '精彩活动', activate: false },
        { text: '热门游戏', activate: false },
        { text: '专题合集', activate: false },
        { text: '下载排行', activate: false },
        { text: '精美图集', activate: false }
      ]
    }
  },
  asyncData({ store, route }) {
    const data = { device: '', type: '', label: '', page: 1 }
    return store.dispatch('fetchHomeData', data)

  },
  

  computed: {
    Home: function() {
      return this.$store.state.Home
    }
  }
}
</script>

<style lang="less">
// 精彩活动

.home-activity {
  overflow: hidden;
  margin-bottom: 65px;
  .activity-item {
    width: 32%;
    height: 245px;
    float: left;
    margin-right: 2%;
    background-color: #fff;
    &>a {
      display: block;
      height: 200px;
    }
    img {
      width: 100%;
      height: 100%;
    }
    &>h4 {
      text-align: left;
      line-height: 44px;
      padding: 0 18px;
      border-bottom: 1px solid #eee; // border-left: 1px solid #eee;
      // border-right: 1px solid #eee;
      // box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:last-child {
      margin-right: 0
    }
  }
}
// H5游戏专区
.home-h5-game {
  height: 700px;
  overflow: hidden;
  .h5-game-list {
    overflow: hidden;
    li {
      width: 124px;
      margin-right: 55px;
      margin-top: 30px;
      float: left;
      text-align: center;
      &:nth-child(7n) {
        margin-right: 0
      }
      i {
        display: block;
        width: 124px;
        height: 124px;
        background-size: 100%;
      }
      h5 {
        line-height: 36px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;
      }
      span {
        display: inline-block;
        border-radius: 15px;
        width: 46px;
        line-height: 20px;
        font-size: 12px;
        color: #ffa93a;
        text-align: center;
        border: 1px solid #ffa93a;
        margin: 0 5px;
        &:last-child {
          color: #2cd0ff;
          border: 1px solid #2cd0ff;
        }
      }
    }
  }
}

// 精美图集
.beautiful-images {
  overflow: hidden;
  margin-bottom: 50px;
  margin-top: 20px;
  .images-list {
    overflow: hidden;
    height: 500px;
    position: relative;
    li {
      position: absolute;
      background-color: #fff;
      &:nth-child(1) {
        width: 490px;
        height: 220px;
        margin-bottom: 10px;
        left: 0;
        top: 0;
      }
      &:nth-child(2) {
        width: 435px;
        height: 500px;
        margin: 0 10px;
        left: 490px;
        top: 0;
      }
      &:nth-child(3) {
        width: 255px;
        height: 245px;
        margin-bottom: 10px;
        left: 945px;
        top: 0;
      }
      &:nth-child(4) {
        width: 240px;
        height: 270px;
        margin-right: 10px;
        left: 0;
        top: 230px;
      }
      &:nth-child(5) {
        width: 240px;
        height: 270px;
        left: 250px;
        top: 230px;
      }
      &:nth-child(6) {
        width: 255px;
        height: 245px;
        left: 945px;
        top: 255px;
      }
    }
  }
}

// 友情链接
.friendly-link {
  position: relative;
  margin: 30px 0;
  .friendly-link-list {
    line-height: 50px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    padding-left: 120px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    li {
      float: left;
      margin: 0 20px;
      a {
        display: inline-block;
        line-height: 50px;
        color: #666;
        font-size: 14px;
        padding: 0 15px;
        position: relative;
        &:hover {
          color: #ffa93a;
          text-decoration: underline;
        }
      }
    }
    .friendly-link-activate {
      a {
        color: #ffa93a;
        &:before {
          content: '';
          width: 0;
          height: 0;
          line-height: 0;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-left: 6px solid orange;
          background-color: transparent;
          position: absolute;
          left: 0;
          top: 20px;
        }
        &:after {
          content: '';
          width: 0;
          height: 0;
          line-height: 0;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-right: 6px solid orange;
          background-color: transparent;
          position: absolute;
          right: 0;
          top: 20px;
        }
      }
    }
  }
}
</style>


